<#include "/template/_blank.html" > <#assign title="新建邮件"> <@head>

<style>

#add-div{
	margin: 1px;
	border: 1px solid #cccccc;
	position: relative;
	height: 22px;
}

#add-div div{
	float: left;
}

#add-in:FOCUS{
	outline: none;
}
.s-user{
	height: 20px;
	margin-left: 3px;
	position: relative;
	margin-top: 1px;
}

.s-user b{
	height: 20px;
	line-height:20px;
	font-weight: normal;
	padding: 0px;
}
.s-user span{
	padding: 0px;
}

.select {
	background-color: #cccccc;
}
</style>

<script>

$(function(){
	var f = false;
	$("#add-in").keydown(function(event){
		if($(this).val()=='')
			f=true;
		else
			f=false;
	});
	$("#add-in").keyup(function(event){
		if(f){
			$(this).blur();
			var us = $(".s-user");
			$(us[us.length-1]).remove();
			$("#add-in").focus();
		}
	});
	
	$(".s-user").each(function(){
		$(this).click(function(){
			$(this).toggleClass("select");
			$("#del-in").focus();
		});
		$("#del-in").keydown(function(event){
			alert(event.which);
			if(event.which == 8 && $(this).hasClass("select")){
				$(this).remove();
				return false;
			}
		});
	});
});

function sendMail(){
	var id = $("#mail-id").val();
	var title = $("#subject").val();
	var content = window.editor.html();
	var userId = "";
	$(".s-user").each(function(){
		userId += $(this).find("b").data("id")+",";
	});
	$.ajax({
		url:"${root}/framemail/sendmail",
		type:"POST",
		data:{
			id:id,
			title:title,
			content:content,
			userId:userId
		},
		success:function(msg){
			
		}
	});
}
</script>
</@head> <@body>
<div id="ll" class="easyui-layout" fit="true">
	<div region="center" split="false">
		<div id="ll2" class="easyui-layout" fit="true">
			<div region="north" style="height: 145px; border: 1px;"
				data-options="split:true">
				<div style="padding: 1px; border: 1px solid #ddd">
					<a href="#" class="easyui-linkbutton"
						data-options="plain:true,iconCls:'icon-mail'" onclick="sendMail();">发送</a> <a
						id="btn-edit" href="#" class="easyui-linkbutton"
						data-options="plain:true,iconCls:'icon-save'">存草稿</a> <a href="#"
						class="easyui-linkbutton"
						data-options="plain:true,iconCls:'icon-cancel'">关闭</a>
				</div>
				<div id="letter-info" style="width:100%;height: auto;position: relative;">
					<table id="addr-tb" style="width:100%;"  class="form-table">
						<tr>
							<td width="80px" align="right">收件人：</td>
							<td>
								<div id="add-div">
									<div id="add-in"><input style="border: 0px;outline: none;" />
										<input id="del-in" style="border: 0px;width: 0px;" />
									</div>
								</div>
							</td>
						</tr>
						<tr >
							<td style="border: 0px;"><input type="hidden" id="mail-id" name="mail-id" value="${id!}" /></td>
							<td style="border: 0px;">添加抄送 - 添加密送 | 分别发送</td>
						</tr>
						<tr>
							<td align="right">主&nbsp;&nbsp;题：</td>
							<td><input id="subject" style="width: 99%" name="subject" /></td>
						</tr>
						<tr>
							<td align="right" style="border: 0px;"><a href="#" onclick="openUpload();">上传附件</a>&nbsp;&nbsp;</td>
							<td style="border: 0px;" id="upfiles">&nbsp;&nbsp;</td>
						</tr>
					</table>
				</div>
			</div>

			<div region="center" style="overflow: hidden; border: 0px;">
				<textarea id="editer" name="content"
					style="width: 100%; height: 100%; visibility: hidden;"></textarea>
			</div>
		</div>
	</div>
	<div region="east" style="width: 200px;"
		data-options="split:true,collapsed:false,title:'系统用户'">
		<div class="easyui-tabs" fit="true">
			<div title="所有用户">
				<ul id="lefttree"></ul>
				<script type="text/javascript">
					$(function(){
						$('#lefttree').tree({
							onClick:function(node){
								if(node.attributes.type=='User'){
									$("#add-in").before('<div class="s-user"><b data-id="'+node.id+'">'+node.text+'</b><span>;</span></div>');
								}
							},
							url:"${root!}/frameuser/deptUserTree",
							fit:true
						});
					});
				</script>
			</div>
			<div title="我的好友"></div>
		</div>
	</div>
</div>

<script type="text/javascript">
$(function(){
	var p = $("#ll2").layout("panel","center");
	var w = $(p).width();
	var h = $(p).height();
	KindEditor.ready(function(K) {
	    window.editor = K.create('#editer',{
	    		width:w-2,
	    		height :h-2,
	    		resizeType:0,
	    		uploadJson:'${root}/upload/fckUp'
	    });
	});
	
	$(p).panel({
		onResize:function(_w, _h){
			 window.editor.edit.setHeight(_h-2);
		}
	});
	
});

function openUpload(){
	var files = OpenDialog("${root}/upload?targetId=${id!}&tag=MAIL", 300, 500);
	for(var i in files){
		$("#upfiles").append("<span id='"+files[i].id+"'><a  href='${root}"+files[i].filepath+files[i].filename+"'>"+files[i].truename+"</a> <a href='#' onclick='deleteFile(\""+files[i].id+"\")'>删除</a> |</span> ");
	}
}

function deleteFile(id){
	$.ajax({
		url:"${root}/upload/delete?id="+id,
		type:"POST",
		success:function(msg){
			if(msg=='success'){
				$("#"+id).remove();
			}
		}
	});
}
</script>
</@body>
